<template>
  <div>
    <button @click="previewFile">预览文件</button>
    <object :data="fileUrl" type="application/pdf" width="100%" height="600"></object>
  </div>
</template>

<script>
import requests from '@/api/ajax.js'

export default{
  data() {
    return {
      fileUrl: ''
    }
  },
  methods: {
    previewFile() {
      // 发送ajax请求获取文件二进制数据
      requests({
        url: '/preview/test.pdf',
        method: 'get',
        responseType: 'blob'
      }).then((response) => {
        // 将二进制数据转换成url地址，并设置给<object>标签的data属性
        this.fileUrl = URL.createObjectURL(response.data)
      }).catch((error) => {
        console.error(error)
      })
    }
  }
}
</script>